﻿<!DOCTYPE HTML>
<html>
    <head>
        <title>OSM Buildings Example</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link href="CSS/leaflet.css" rel="stylesheet" />
        <script src="data/blockgroup.js"></script>           

        <script src="JS/OSMBuildings-Leaflet.debug.js"></script>
        <script src="JS/jquery-1.10.2.min.js"></script>
        <script src="JS/leaflet.js"></script>
        <script src="JS/map_styles.js"></script>
        <link href="CSS/styles.css" rel="stylesheet" />

        
    </head>
    
    
    <body>
        

            <div id="map_main"></div>
       

        <script type="text/javascript">

            var initialZoom = 12;
            var map = new L.Map('map_main').setView([39.73997, -104.9856], initialZoom);
            var tileURL = "http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg";
            var attributionText = 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">';
            attributionText = attributionText + ' data © <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors';
            var tileLayer = new L.TileLayer(tileURL, { attribution: attributionText });

            map.addLayer(tileLayer);

            var OSMBLayer = new OSMBuildings(map).setData(blockgroup).setStyle({ roofColor: "#FFFFCC", wallColor: "#ffcc00" });

        </script>

    </body>

</html>
